<template>
  <div class="knife_container paystatus_box">
    <div class="paystatus-box">
      <template v-if="+query.payStatus === 1">
        <span class="el-icon-success icon success"></span>
        <div class="text">您的订单已成功支付,工作人员立马处理,请关注订单信息或咨询400-992-0808.</div>
      </template>
      <template v-else>
        <span class="el-icon-error icon fail"></span>
        <div class="text">支付失败，{{query.payMsg}}可能银行订单支付状态更新有延迟
          请您稍后查看订单中心或咨询 400-992-0808!</div>
      </template>
      <router-link class="success-btn" :to="{name: 'orderDetail', params: {orderId: orderId}}">跳转至订单详情</router-link>
      <!-- <a :href='hrefDetail' class="success-btn"> 跳转至订单详情</a> -->
    </div>
  </div>
</template>

<script>
import {clearCookie, getCookie} from '@/config/mUntils'
// import {payStatus} from '@/service/get-data'
export default {
  data () {
    return {
    }
  },
  computed: {
    orderId () {
      return getCookie('orderId')
    },
    query () {
      return this.$route.query
    }
  },
  methods: {

  },
  mounted () {

  },
  destroyed () {
    clearCookie('orderId')
  }
}
</script>

<style lang="scss" scoped>
  .paystatus_box{
    background: #ffffff;
  }
  .paystatus-box{
    width: 500px;
    margin: 30px auto 20px;
    padding: 85px 40px 0;
    background: #ffffff;
    text-align: center;
    overflow: hidden;
    min-height: 440px;
    .text{
      font-size: 14px;
      padding: 17px 0 25px;
      line-height: 20px;
      color: #777;

    }
  }
  .icon{
    font-size: 60px;
    &.success{
      color: #67c23a;
    }
    &.fail{
      color: #f56c6c;
    }
  }
  .success-btn{
    width: 150px;
    padding: 12px 0;
    display: inline-block;
    text-align: center;
    background: #ffcc00;
    color: #fff;
    border-radius: 5px;
  }
</style>
